codepedia.de

# Vue List Rendering

# Loop through an array

<ul>
	<li v-for="detail in details">{{detail}}</li>
</ul>
# Example
<button v-on:click="toggleShowBooks">
	<span v-if="showBooks">Hide Books</span>
	<span v-else>Show Books</span>
</button>

books: [
	{ title: 'name of the wind', author: 'patrik rothfuss'},
	{ title: 'the final empire', author: 'brandon sanderson'},
	{ title: 'the way of kings', author: 'brandon sanderson'},
],

# Variations:

# Using the index:

<li v-for="(detail, index) in details">{{detail}} - {{index}}</li>

# Loop through Objects

<li v-for="value in { name: 'Hans', age:39}">
	{{value}}
</li>

# With Key-Name

<div v-for="(value, key) in object">
  {{ key }}: {{ value }}
</div>

# With Key-Name and Index

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

# Loop trough a range of numbers

<li v-for="num in 10">{{num}}</li>

# Destructuring

<li
	v-for="{ name, id } in users" 
    :key="id"
	>
		{{ name }}
</li>

# Object / grab the key

<li v-for="(value, key) in { 
  name: 'Lion King', 
  released: 2019,
	director: 'Jon Favreau',
}">
	{{ key }}: {{ value }}
</li>

with index:

 <li v-for="(value, key, index) in { 
 	name: 'Lion King',
	released: 2019,
	director: 'Jon Favreau',
}">
	#{{ index + 1 }}. {{ key }}: {{ value }}
</li>

# Key Attribute

Essential for list items! Each DOM element needs a unique key.

<div v-for="variant in variants" :key="variant.id">
	{{ variant.color }}
</div>

:keyis shorthand for v-bind

  • Key needs a uniqe value für each element.

    • Usually IDs (don't use index)
    • can be the whole object

  • to keep frontend-ui in sync

  • performance improvements

  • you can use template literals:

    <li v-for="(detail, index) in details" :key="`key${index}`">{{detail}}</li>

# v-if and v-for:

DON'T use them on the same element. use a wrapper with v-if instead!

← Vue Events →